<template>
    <div v-if="!nowGenre_Item.chapter_count" class="itemCover"
         @click="$router.push({path:'/article',query:{item:JSON.stringify(nowGenre_Item)}})">

        <div class="imgParent">
            <img :src="nowGenre_Item.img" style="width: 100%;height: 41.67vw;">
            <div class="bottom">
                <div class="icon-play2"><span class="video">0</span></div>
                <div class="icon-file-text"><span class="comment">0</span></div>
            </div>
        </div>
        <p>{{nowGenre_Item.name}}</p>

    </div>
    <div v-else class="itemCover" @click="$router.push({path:'/novel',query:{item:JSON.stringify(nowGenre_Item)}})">

        <div class="imgParent">
            <img :src="nowGenre_Item.img" style="width: 100%;height: 41.67vw;">
            <div class="bottom">
                <div class="icon-play2"><span class="video">0</span></div>
                <div class="icon-file-text"><span class="comment">0</span></div>
            </div>
        </div>
        <p>{{nowGenre_Item.name}}</p>

    </div>
</template>

<script>
    // {name:'article',params:{id:nowGenre_Item.id,img:nowGenre_Item.img}}
    export default {
        name: "ItemShow",
        props: ['nowGenre_Item']
    }
</script>

<style lang="less">
    .itemCover {
        .imgParent {
            position: relative;

            .bottom {
                padding: 0 2.778vw;
                margin-bottom: 1.389vw;
                position: absolute;
                bottom: 0.556vw;
                background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
                justify-content: space-between;
                color: white;
                display: flex;
                left: 0;
                right: 0;
            }

        }

        p {
            font-size: 3.33vw;
        }
    }
</style>